<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>新建纪念馆</title>
<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
<script src="http://g.alicdn.com/bui/bui/1.1.10/config.js"></script>

</head>
<body>
<div class="doc-content">
 <form id="J_Form" class="form-horizontal" method="post">
 	<div class="row">
        <div class="panel panel-primary">
          <div class="panel-header clearfix">
            <h3 class="pull-left">基本信息</h3>
          </div>
          <div class="panel-body">
            <div class="row">
        <div class="control-group span10">
          <label class="control-label">场馆类型：</label>
          <div class="controls bui-form-field-select" data-items="{'1':'个人','2' : '双人','3' : '名人'}">
            <input name="class" type="hidden" value="1">
          </div>
        </div>
        <div class="control-group span10">
          <label class="control-label"><s>*</s>场馆名称：</label>
          <div class="controls">
            <input name="name" type="text"  class="control-text"  data-rules="{required:true}">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="control-group span10">
          <label class="control-label">主页分格：</label>
          <div class="controls bui-form-field-select" data-items="{'1':'1班','2' : '2班','3' : '3班'}">
            <input name="class" type="hidden" value="1">
          </div>
        </div>
        <div class="control-group12 span10">
          <label class="control-label">大厅分格：</label>
          <div class="controls bui-form-field-select" data-items="{'1':'游泳','2':'跑步','3':'爬山'}" >
            <input name="love" type="hidden" value="1,2">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="control-group span12">
          <label class="control-label">馆成员关系：</label>
          <div class="controls">
            <input name="address" type="text" class="span8 span-width control-text"  data-rules="{required:true}">
          </div>
        </div>
      </div>
          </div>
        </div>
    </div>
 
  	<div class="row">
        <div class="panel panel-primary">
          <div class="panel-header clearfix">
            <h3 class="pull-left">成员列表</h3>
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="span21 offset3 control-row-auto">
         			<div id="grid"></div>
        	  </div>
        		<input type="hidden" name="gridValue"><!--存放grid的数据-->
     		 </div>
            </div>
          </div>  
		</div>
	</div>	
	<div class="row">
        <div class="panel panel-primary">
          <div class="panel-header clearfix">
            <h3 class="pull-left">事迹</h3>
          </div>
          <div class="panel-body">
            <div class="row">
            
     		 </div>
            </div>
          </div>  
		</div>
	</div>	
      <div class="row">
      
      
      <div class="row">
        <div class="form-actions offset3">
          <button type="submit" class="button button-primary">保存</button>
          <button type="reset" class="button">重置</button>
        </div>
      </div>  
    </form>

</div>


 
<!-- script start --> 
 <script  type="text/javascript">
 BUI.use(['bui/grid','bui/data'],function(Grid,Data){
            var 
          Store = Data.Store,
          enumObj = {"1" : "男","0" : "女"},
          columns = [
            {title : '姓名',dataIndex :'a',editor : {xtype : 'text'}}, //editor中的定义等用于 BUI.Form.Field.Text的定义
            {title : '出生日期',dataIndex :'c', editor : {xtype : 'date'},renderer : Grid.Format.dateRenderer},
            {title : '逝世日期',dataIndex :'c', editor : {xtype : 'date'},renderer : Grid.Format.dateRenderer},
            {title : '单选',dataIndex : 'd', editor : {id:'mySelect',xtype :'select',items : enumObj,rules : {required : true},validator : valid},renderer : Grid.Format.enumRenderer(enumObj)},
            {title : '牌位',dataIndex :'a',editor : {xtype : 'text'}}
          ],
          data = [];
        function valid(value){
         
        }
        var editing = new Grid.Plugins.CellEditing({
          triggerSelected : false //触发编辑的时候不选中行
        }),
          store = new Store({
            data : data,
            autoLoad:true
          }),
          grid = new Grid.Grid({
            render:'#grid',
            columns : columns,
            width : 700,
            forceFit : true,
            tbar:{ //添加、删除
                items : [{
                  btnCls : 'button button-small',
                  text : '<i class="icon-plus"></i>添加',
                  listeners : {
                    'click' : addFunction
                  }
                },
                {
                  btnCls : 'button button-small',
                  text : '<i class="icon-remove"></i>删除',
                  listeners : {
                    'click' : delFunction
                  }
                }]
            },
            plugins : [editing,Grid.Plugins.CheckSelection,Grid.Plugins.ColumnChecked],
            store : store
          });
 
        grid.render();
 
        
 
        function validFn (value,obj) {
          var records = store.getResult(),
            rst = '';
          BUI.each(records,function (record) {
            if(record.a == value && obj != record){
              rst = '文本不能重复';
              return false;
            }
          });
          return rst;
        }
 
        //添加记录
        function addFunction(){
          var newData = {b : 0};
          store.addAt(newData,0);
          editing.edit(newData,'a'); //添加记录后，直接编辑
        }
        //删除选中的记录
        function delFunction(){
          var selections = grid.getSelection();
          store.remove(selections);
        }          
      });
      
</script>
</body>
</html>